一、前言

Hexo 是什么？

Hexo 是一款出色的[静态博客框架]，它基于 Node.js 运行，可以将我们撰写的 Markdown 文档快速解析渲染成静态的 HTML 网页。

GitHub Pages 是什么？

GitHub Pages 是 GitHub 免费提供的静态站点托管服务，让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面，对于个人项目和小型网站来非常合适。

二、准备

本地环境

• Node.js (版本不低于 10.13，建议使用 Node.js 12.0 及以上版本)
• Git (使用最新版即可)

安装完毕后可以在cmd里面输入 node -v 、npm -v 和 git -v 查看安装版本。以下是示例↓

三、本地连接 GitHub

配置用户名与邮箱和创建 SSH 密匙

创建一个文件夹，名字随意，我这叫 Hexo，然后右键选择 Open Git Bash Here。

然后依次输入

1
2
3

git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"
ssh-keygen -t rsa -C "GitHub 邮箱"

出现命令不用管，一路回车就行。创建完后进入 C盘 > Users > 用户名 > .ssh 目录（记得到文件夹上栏“查看” > “显示”中勾选显示“隐藏的项目”）

用记事本打开 id_rsa.pub 并复制里面的内容。

在 GitHub 中添加 SSH 密钥

回到 GitHub，进入 Settings，选择左栏的 SSH and GPG keys，点击 New SSH key。

Title 随便取，我这选择用户名作为标题，然后把 id_rsa.pub 里面的内容到复制到 Key 中，点击 Add SSH key。

验证连接

依旧是在 Git Bash Here 界面中输入

1

ssh -T git@github.com

出现 Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入 yes回车即可。

若出现下图的提示即表示连接成功。

四、创建 GitHub 仓库

• 创建仓库，仓库名称格式要求：用户名.github.io ，如果用户名包含大写字母，仓库名中需要转为小写。
• 勾选 Add a README file。

填好后点击 Create repository 创建仓库。

现在我们访问 https://用户名.github.io 可以看到默认界面。

五、本地安装 Hexo

安装 Hexo

我们在之前已经创建好的文件夹内，同样右键点击 Open Git Bash Here，然后使用 npm 安装 Hexo。在命令行中输入

1

npm install -g hexo-cli

其中 -g 的作用是安装 hexo-cli 到全局的 node_modules，而不是特定于项目的文件夹，这样就可以在命令行下的任何位置使用该工具的命令，而不是局限于某个项目。

安装成功后，可以通过以下命令查看 Hexo 的版本。

1

hexo -v

安装成功的话会显示。

生成博客工程

生成博客工程文件（文件夹名字自定义，此处以 blog 为例）

1
2
3
4

hexo init blog # 生成博客文件夹，不填名字就是在当前目录生成
hexo cd blog # 移动到blog文件夹
npm install # 下载组件
hexo init blog && cd blog && npm install # 可组合使用

当出现下图提示的时候，说明已经完成了。

初始化完毕以后，我们可以在 Hexo 程序文件夹中看到 Hexo 程序文件。

生成静态文件

完成上述步骤后我们在博客根目录输入以下命令

1

hexo g # 生成静态文件

生成的博客静态文件存放在 blog > public 目录下。

启动服务器

启动本地服务器，默认情况下，访问网址为 http://localhost:4000。

1

hexo s # 如果 4000 端口被占用了，可以运行 hexo s -p 端口 更改端口号后重试

然后我们访问 http://localhost:4000。

上传到 GitHub

在博客根目录右键点击 Open Git Bash Here 安装 Hexo 的远程部署插件。

1

npm install hexo-deployer-git --save

然后修改_config.yml 文件末尾的 Deployment 部分。

修改成如下（修改为你的用户名与仓库名）

1
2
3
4

deploy:
  type: git
  repo: git@github.com:854399598/854399598.github.io.git
  branch: gh-pages

SSH 连接地址在仓库 <>Code 里面看到。

修改完成保存后运行

1
2

hexo cl # 清楚本地缓存
hexo d # 开始部署

出现下面的提示说明已经把网站上传到 GitHub 了。

可以发现 gh-pages 分支已经被上传到 Github 上。

在项目设置的 General > Default branch 中将默认分支设置为之前上传的项目。

在项目设置的 Settings > Pages > Branch 中，将 Github Pages 指向 gh-pages 分支的根目录，按 save 按钮进行保存。

打开 https://用户名.github.io ，如果打开成功，说明部署完成。